<template>

  <!-- 折叠面板 -->
  <div>
    <el-collapse class="honor-container">
      <el-collapse-item> 
        <!-- 展示面板 -->
        <template slot="title" class="honor-name">
          <div style="font-size: 16px;padding: 0px 25px; display: flex;">
            {{Data.module}}
          </div>
        </template>

        <div>
          <!-- 小标题 -->
          <span class="list-top">{{Data.module}}名单:</span>

          <!-- 选择名单 -->
          <div style="display:flex;flex-direction:row;flex-wrap:wrap;" v-if="!honor">
            <!-- 复选框 -->
            <el-checkbox-group v-model="SelectList">
              <el-checkbox
                class="name-list"
                v-for="(item, index) in singleHonorData" 
                :key="index"
                style="width: 70px;" 
                :label="item" 
              >{{ item.slice(9) }}</el-checkbox>
            </el-checkbox-group>
          </div>
          
          <!-- 确认名单 -->
          <div style="display:flex;flex-direction:row;flex-wrap:wrap;" v-if="honor">
            <ul  class="name-list" v-for="(value, key) in nameData.data" :key="key" >
              <div class="normalBox">
                {{value.slice(9)}}
              </div>
            </ul >
          </div>
          
          <!-- 底部确认 -->
          <div class="list-bottom">
            <!-- 点击按钮 -->
            <button class="list-bottom-left" v-if="!honor" @click="submit()">
              确定
            </button>
            <button class="list-bottom-left" v-if="honor" @click="((honor=!honor),AdjustPersonHonor())">
              调整
            </button>
          </div>        

        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { updateHonorPerson, SingleHonor } from "@/api/myInfoTeacher/honor"

export default {
  props: {
    nameData: { },
  },
  data() {
    // 测试
    return {
      Data: this.nameData,
      honor: true,
      updata: true,
      SelectList: [],
      singleHonorData: [],
      divShow: true,
    }
  },
  watch: {
    SelectList(newValue) {
      // console.log(newValue, '选中之后新的值')
    }
  },
  mounted() {

  },
  methods: {

    // 确定提交
    submit() {
      Promise.all([
        this.updatePerson(),
      ]).then(res => {
        Promise.all([
          this.$parent.$parent.getPersonList()
        ]).then(res => {
          this.honor=!this.honor
        })
      })
    },

    // 调整单个荣誉接口
    async AdjustPersonHonor(){
      // console.log(this.nameData, 'nameData')
      const res = await SingleHonor(this.nameData.gradeId, this.nameData.name)
      if ( res.rows == undefined ) {
        this.$message.error("数据库错误请检查")
      } else if ( res.rows.length == 0 ) {
        this.$message("数据为空")
      } else {
        this.singleHonorData = res.rows
      }
    },

    // 修改荣誉人
    async updatePerson(){
      const candidate = this.SelectList.map(item => {
        return item.slice(0,8)
      })
      const dataClass = {
        candidate: candidate,
        module: this.Data.name
      }
      const res = await updateHonorPerson(dataClass) 
      console.log(res, 'updateHonorPerson')
    },
  }


}

</script>

<style>

/* 折叠面板 */
.honor-container {
  width: 100%;
  border: 0px;
}

/* 展示面板 */
.honor-name {
  display: flex;
  font-size: 1rem;
  padding: .625rem 1.5rem;
}

/* 小标题 */
.list-top {
  font-size: .75rem;
  color: #888888;
  margin: 0px 1.5rem;
}

/* 复选框 */
.name-list {
  margin: .625rem;
  padding-left: 1.25rem;
}

.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000;
}

/* 正常显示框 */
.normalBox {
  padding-left: 1.5rem;
  font-size: .875rem;
  width: 5rem;
  color: #888888;
}

/* 底部确认 */
.list-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1.25rem;
}

/* 点击按钮 */
.list-bottom-left {
  width: 11.25rem;
  height: 2.5rem;
  border-radius: 20px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: #7c0000;
  border: 1px solid rgba(187, 187, 187);
}
</style>